<template>
  <div>
    <div slot="container" class="innerContainer" v-if="!successInfoShow" id="applyInnerContainer">
      <div class="chinese" v-if="luanguageType=='cn'">
        <p class="p1">{{littleTitle}}</p>
        <p class="border"></p>
        <div class="formPost">
          <el-form :model="formPostDate" ref="formPostDate" label-width="100px" class="demo-dynamic">
            <el-row :gutter="20">
              <el-col :span="14">
                <el-form-item
                  prop="name"
                  label="姓名"
                  :rules="[
                  { required: true, message: '请输入姓名', trigger: 'blur' },
                  { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }]">
                  <el-input v-model="formPostDate.name" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" id="sex">
                <el-form-item
                  prop="sex"
                  label="性别"
                  :rules="[{ required: true, message: '请选择性别', trigger: 'change'}]">
                  <el-select v-model="formPostDate.sex" style="margin-left:-50px;width:90px">
                    <el-option label="男" value="0"></el-option>
                    <el-option label="女" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item
              prop="country"
              label="国家/地区"
              :rules="[{ required: true, message: '请选择国家/地区', trigger:   'change' ,type:'number' }]">
              <el-select v-model="formPostDate.country" placeholder="请选择国家/地区">
                <el-option v-for="(item,index) in chooseJson.country" :key="index" :label="item.name" :value="item.id" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              prop="id_card_type"
              label="证件信息"
              :rules="[{ required: true, message: '请选证件信息', trigger: 'change' }]">
              <el-select v-model="formPostDate.id_card_type" placeholder="请选证件信息">
                <el-option label="身份证" value="1"></el-option>
                <el-option label="护照" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              prop="id_card_no"
              label=""
              :rules="[{required: true,trigger: 'blur',validator:validateIdentity}]"
              v-if="formPostDate.id_card_type == 1">
              <el-input v-model="formPostDate.id_card_no"></el-input>
            </el-form-item>
            <el-form-item
              prop="id_card_no"
              label=""
              :rules="[{required: true,trigger: 'blur',validator:validatePassport}]"
              v-if="formPostDate.id_card_type == 2">
              <el-input v-model="formPostDate.id_card_no"></el-input>
            </el-form-item>
            <el-form-item
              prop="organ"
              label="所属媒体"
              :rules="[{ required: true, message: '请输入所属媒体', trigger: 'blur' }]">
              <el-input v-model="formPostDate.organ"></el-input>
            </el-form-item>
            <el-form-item
              prop="organ_type"
              label="媒体性质"
              :rules="[
              { required: true, message: '请选择媒体性质', trigger:   'change' ,type:'number' },
            ]"
            >
              <el-select v-model="formPostDate.organ_type" placeholder="请选择媒体性质">
                <el-option v-for="(item,index) in chooseJson.media_type" :key="index" :label="item.name" :value="item.id" ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              prop="position"
              label="职位"
              :rules="[{ required: true, message: '请输入职位', trigger: 'blur' }]">
              <el-input v-model="formPostDate.position"></el-input>
            </el-form-item>

            <el-form-item
              prop="phone"
              label="联系电话"
              :rules="[{ required: true, trigger: 'blur',validator: validPhone }]">
              <el-input v-model="formPostDate.phone"></el-input>
            </el-form-item>
            <el-form-item
              prop="email"
              label="电子邮件"
              :rules="[
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
              ]">
              <el-input v-model="formPostDate.email"></el-input>
            </el-form-item>
            <el-form-item
              prop="photo4"
              label="名片扫描件"
              :rules="[{ required: true, message: '请上传图片', trigger: 'change' }]">
              <div class="img">
                <el-button size="small" type="primary" >点击上传</el-button>
                <input type="file" id="cover-img" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="zi_upload_input" @change="getfile($event,4)">
              </div>
            </el-form-item>
            <el-form-item prop="photo4">
              <img :src="formPostDate.photo4" alt="" v-if="formPostDate.photo4" class="imgShow">
            </el-form-item>
            <el-form-item
              prop="has_report_card"
              label="是否持有记者证"
              :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
              <el-select v-model="formPostDate.has_report_card" placeholder="是否持有记者证">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="formPostDate.has_report_card==1"
              prop="reporter_card_no"
              label="记者证号"
              :rules="[{ required: true,  trigger: 'blur',validator:validateNum}]">
              <el-input v-model.number="formPostDate.reporter_card_no" ></el-input>
            </el-form-item>
            <el-form-item
              v-if="formPostDate.has_report_card==1"
              prop="photo1"
              label="上传记者证扫描件"
              :rules="[{ required: true, message: '上传记者证扫描件', trigger: 'change' }]">
              <div class="img">
                <el-button size="small" type="primary">点击上传</el-button>
                <input type="file" id="cover-img" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="zi_upload_input" @change="getfile($event,1)">
              </div>
            </el-form-item>
            <el-form-item prop="photo1">
              <img :src="formPostDate.photo1" alt="" v-if="formPostDate.photo1" class="imgShow">
            </el-form-item>
            <el-form-item
              v-if="formPostDate.has_report_card==1"
              prop="photo2"
              label="记者证信息扫描页"
              :rules="[{ required: true, message: '上传记者证信息扫描页', trigger: 'change' }]">
              <div class="img">
                <el-button size="small" type="primary">点击上传</el-button>
                <input type="file" id="cover-img" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="zi_upload_input" @change="getfile($event,2)">
              </div>
            </el-form-item>
            <el-form-item prop="photo2">
              <img :src="formPostDate.photo2" alt="" v-if="formPostDate.photo2" class="imgShow">
            </el-form-item>

            <el-form-item
              v-if="formPostDate.has_report_card==1"
              prop="photo3"
              label="2018年检页面扫描件"
              :rules="[{ required: true, message: '上传2018年检页面扫描件', trigger: 'change' }]">
              <div class="img">
                <el-button size="small" type="primary">点击上传</el-button>
                <input type="file" id="cover-img" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="zi_upload_input" @change="getfile($event,3)">
              </div>
            </el-form-item>
            <el-form-item prop="photo3">
              <img :src="formPostDate.photo3" alt="" v-if="formPostDate.photo3" class="imgShow">
            </el-form-item>
            <div id="applyUni">
              <el-row :gutter="20" >
                <el-form-item
                  prop="conference_ids"
                  label="您可能参加本次年会的哪些场次"
                  :rules="[{ required: true, message: '请选择场次', trigger: 'change' ,type:'array'}]"
                  style='margin-left: 9px'
                  id="session">
                  <el-checkbox-group v-model="formPostDate.conference_ids" style="margin-left:2px">
                    <el-checkbox :label="item.id" v-for="item in chooseJson.media_conference" :key="item.name">
                      {{item.name}}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-row>
            </div>
            <el-row :gutter="20" id="sessionRow">
            </el-row>
            <el-form-item>
              <el-button type="primary" plain @click="submitForm('formPostDate')" id="submit">提交</el-button>
            </el-form-item>
            <el-form-item>
            </el-form-item>
          </el-form>
        </div>
      </div>

<!-- // 英文 --><!-- // 英文 --><!-- // 英文 --><!-- // 英文 --><!-- // 英文 --><!-- // 英文 --><!-- // 英文 --><!-- // 英文 --><!-- // 英文 -->

      <div class="chinese" v-if="luanguageType=='en'">
        <p class="p1">{{en_littleTitle}}</p>
        <p class="border"></p>
        <div class="formPost">
          <el-form :model="formPostDate" ref="formPostDate" label-width="100px" class="demo-dynamic">
            <el-row :gutter="20">
              <el-col :span="14">
                <el-form-item
                  prop="name"
                  label="Full Name"
                  :rules="[
                  { required: true, message: 'enter full Name', trigger: 'blur' },
                  { min: 2, max: 10, message: 'the length is between 2 and 10 characters', trigger: 'blur' }]">
                  <el-input v-model="formPostDate.name" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" id="sex">
                <el-form-item
                  prop="sex"
                  label="Gender"
                  :rules="[{ required: true, message: 'please select gender', trigger: 'change'}]">
                  <el-select v-model="formPostDate.sex" style="margin-left:-50px;width:90px" placeholder="select">
                    <el-option label="male" value="0"></el-option>
                    <el-option label="female" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item
              prop="country"
              label="Country / Region"
              :rules="[{ required: true, message: 'please select Country / Region', trigger:   'change' ,type:'number' }]">
              <el-select v-model="formPostDate.country" placeholder="please select">
                <el-option v-for="(item,index) in chooseJson.country" :key="index" :label="item.en_name" :value="item.id" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              prop="id_card_type"
              label="Identity Informaiton"
              class="pdt0"
              :rules="[{ required: true, message: 'please select identity informaiton', trigger: 'change' }]">
              <el-select v-model="formPostDate.id_card_type" placeholder="please select">
                <el-option label="identity card" value="1"></el-option>
                <el-option label="passport" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              prop="id_card_no"
              label=""
              :rules="[{required: true,trigger: 'blur',validator:validateIdentity}]"
              v-if="formPostDate.id_card_type == 1">
              <el-input v-model="formPostDate.id_card_no"></el-input>
            </el-form-item>
            <el-form-item
              prop="id_card_no"
              label=""
              :rules="[{required: true,trigger: 'blur',message: 'please enter your passport information'}]"
              v-if="formPostDate.id_card_type == 2">
              <el-input v-model="formPostDate.id_card_no"></el-input>
            </el-form-item>
            <el-form-item
              prop="organ"
              label="Media Organization"
              class="pdt0"
              :rules="[{ required: true, message: 'please enter media organization', trigger: 'blur' }]">
              <el-input v-model="formPostDate.organ"></el-input>
            </el-form-item>
            <el-form-item
              prop="organ_type"
              label="Media Type"
              :rules="[
              { required: true, message: 'please select media Type', trigger:   'change' ,type:'number' },
            ]"
            >
              <el-select v-model="formPostDate.organ_type" placeholder="please select">
                <el-option v-for="(item,index) in chooseJson.media_type" :key="index" :label="item.en_name" :value="item.id" ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              prop="position"
              label="Position"
              :rules="[{ required: true, message: 'please enter position', trigger: 'blur' }]">
              <el-input v-model="formPostDate.position"></el-input>
            </el-form-item>

            <el-form-item
              prop="phone"
              label="Telephone"
              :rules="[{ required: true, message: 'please enter Telephone', trigger: 'blur' }]">
              <el-input v-model="formPostDate.phone"></el-input>
            </el-form-item>
            <el-form-item
              prop="email"
              label="E-Mail"
              :rules="[
              { required: true, message: 'please enter e-Mail', trigger: 'blur' },
              { type: 'email', message: 'Please enter the correct e-mail address', trigger: 'blur'}
              ]">
              <el-input v-model="formPostDate.email"></el-input>
            </el-form-item>
            <el-form-item
              prop="photo4"
              label="Business Card Scan"
              class="pdt0"
              :rules="[{ required: true, message: 'please upload  photo', trigger: 'change' }]">
              <div class="img">
                <el-button size="small" type="primary">click on the upload</el-button>
                <input type="file" id="cover-img" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="zi_upload_input" @change="getfile($event,4)">
              </div>
            </el-form-item>
            <el-form-item prop="photo4">
              <img :src="formPostDate.photo4" alt="" v-if="formPostDate.photo4" class="imgShow">
            </el-form-item>
            <el-form-item
              prop="has_report_card"
              label="Do you hold a press card?"
              class="pdt0"
              :rules="[{ required: true, message: 'please select', trigger: 'change' }]">
              <el-select v-model="formPostDate.has_report_card" placeholder="please select">
                <el-option label="YES" value="1"></el-option>
                <el-option label="NO" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="formPostDate.has_report_card==1"
              prop="reporter_card_no"
              label="Press Card NO."
              :rules="[{ required: true,  trigger: 'blur',validator:validateNum}]">
              <el-input v-model.number="formPostDate.reporter_card_no" ></el-input>
            </el-form-item>
            <el-form-item
              v-if="formPostDate.has_report_card==1"
              prop="photo1"
              label="press card scanning copy"
              class="pdt0"
              :rules="[{ required: true, message: 'press card scanning copy', trigger: 'change' }]">
              <div class="img">
                <el-button size="small" type="primary">click on the upload</el-button>
                <input type="file" id="cover-img" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="zi_upload_input" @change="getfile($event,1)">
              </div>
            </el-form-item>
            <el-form-item prop="photo1">
              <img :src="formPostDate.photo1" alt="" v-if="formPostDate.photo1" class="imgShow">
            </el-form-item>
            <el-form-item
              v-if="formPostDate.has_report_card==1"
              prop="photo2"
              class="pdt0"
              label="Press Card Information Page Scan"
              :rules="[{ required: true, message: 'press card information page scan', trigger: 'change' }]">
              <div class="img">
                <el-button size="small" type="primary">click on the upload</el-button>
                <input type="file" id="cover-img" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="zi_upload_input" @change="getfile($event,2)">
              </div>
            </el-form-item>
            <el-form-item prop="photo2">
              <img :src="formPostDate.photo2" alt="" v-if="formPostDate.photo2" class="imgShow">
            </el-form-item>

            <el-form-item
              v-if="formPostDate.has_report_card==1"
              prop="photo3"
              class="pdt0"
              label="2018 Annual Inspection Information Page Scan"
              :rules="[{ required: true, message: '2018 annual inspection information page scan', trigger: 'change' }]">
              <div class="img">
                <el-button size="small" type="primary">click on the upload</el-button>
                <input type="file" id="cover-img" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" class="zi_upload_input" @change="getfile($event,3)">
              </div>
            </el-form-item>
            <el-form-item prop="photo3">
              <img :src="formPostDate.photo3" alt="" v-if="formPostDate.photo3" class="imgShow">
            </el-form-item>
            <div id="applyUni">
              <el-row :gutter="20" >
                <el-form-item
                  prop="conference_ids"
                  label="Which session(s) would you like to attend?"
                  :rules="[{ required: true, message: 'please select session(s)', trigger: 'change' ,type:'array'}]"
                  style='margin-left: 9px'
                  id="session">
                  <el-checkbox-group v-model="formPostDate.conference_ids" style="margin-left:2px">
                    <el-checkbox :label="item.id" v-for="item in chooseJson.media_conference" :key="item.name">
                      {{item.en_name}}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-row>
            </div>
            <el-row :gutter="20" id="sessionRow">
            </el-row>
            <el-form-item>
              <el-button type="primary" plain @click="submitForm('formPostDate')" id="submit">Submit</el-button>
            </el-form-item>
            <el-form-item>
            </el-form-item>
          </el-form>
        </div>
      </div>

    </div>
    <div v-show="successInfoShow" style="padding: 15px 0 0 0;line-height: 2;font-size: 17px;">
      <div v-html="successInfo" style="font:arial,Hiragino Sans GB,sans-serif" v-if="luanguageType=='en'"></div>
      <div v-html="successInfo" v-if="luanguageType=='cn'"></div>
      <el-button type="primary" plain @click="goback" id="submit">{{luanguageType=='cn'?'返回':'Back'}}</el-button>
    </div>
  </div>
</template>
<script>
import frames from "./components/frame";
import {
  validateIdentity,
  validatePassport,
  validPhone,
  validateNum
} from "../../utils/validate";
import apiConfig from "../../utils/apiconfig";
import helper from "../../utils/helper";
import api from "../../utils/api";
export default {
  data() {
    return {
      formPostDate: {
        name: "", //姓名
        sex: "", //性别
        country: "", //国籍
        id_card_type: "", //证件信息
        id_card_no: "", //证件号码
        organ: "", //企业
        organ_type: "",
        position: "", //职位
        phone: "",
        email: "",
        busi_card: "",
        has_report_card: "",
        report_card_1: "",
        report_card_2: "",
        report_card_3: "",
        conference_ids: [],
        photo1: "",
        photo2: "",
        photo3: "",
        photo4: "",
        reporter_card_no: ""
      },
      validateIdentity: validateIdentity,
      validatePassport: validatePassport,
      validateNum: validateNum,
      validPhone: validPhone,
      chooseJson: {
        country: [{ name: "", id: "" }],
        conference: [],
        media_type: []
      },
      successInfoShow: false,
      successInfo: "",
      en_content: "",
      content: ""
    };
  },
  props: ["luanguageType", "en_littleTitle", "littleTitle"],
  components: {
    frames
  },
  watch: {
    luanguageType(i, ii) {
      if (!this.successInfoShow) {
        try {
          this.$refs.formPostDate.resetFields() || "";
        } catch (error) {
          console.log(error);
        }
      }
      if (i == "cn") {
        this.successInfo = this.content;
      } else {
        this.successInfo = this.en_content;
      }
    }
  },
  created() {},
  mounted() {
    this.getChoose();
  },
  methods: {
    handlePreview() {},
    handleRemove() {},
    submitForm(formPostDate) {
      this.$refs[formPostDate].validate(valid => {
        if (valid) {
          if (this.luanguageType === "cn") {
            this.$confirm(
              "请仔细核对您的报名信息，一个身份证（护照）只能报名一次，提交后的报名信息将不可被修改。",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            )
              .then(() => {
                this.post();
              })
              .catch(() => {});
          } else if (this.luanguageType === "en") {
            this.$confirm(
              "Please check your registration information carefully. An ID card (or passport) can only be registered once. The registration information after submission will not be modified.",
              "prompt message",
              {
                confirmButtonText: "confirm",
                cancelButtonText: "cancle",
                type: "warning"
              }
            )
              .then(() => {
                this.post();
              })
              .catch(() => {});
          }
        } else {
          if (this.luanguageType === "cn") {
            this.$message.error("请补充完整信息");
          } else {
            this.$message.error("Please provide full information");
          }
          console.log("error submit!!");
          return false;
        }
      });
    },
    post() {
      let loading = null;
      if (this.luanguageType === "cn") {
        loading = this.$loading({
          target: document.querySelector(".innerContainer"),
          lock: false,
          text: "报名信息提交中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
      } else if (this.luanguageType === "en") {
        loading = this.$loading({
          target: document.querySelector(".innerContainer"),
          lock: false,
          text: "Registration information is submitted",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
      }
      let self = this;

      let formData = new FormData();
      formData.append("lang", self.luanguageType);
      for (let key in self.formPostDate) {
        formData.append(key, self.formPostDate[key]);
      }
      let configs = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      api.POST(
        helper.getClientApiUrl(apiConfig.web.mediaApplySubmit),
        formData,
        configs,
        res => {
          self.successInfoShow = true;
          if (self.luanguageType == "cn") {
            self.successInfo = res.content;
          } else {
            self.successInfo = res.en_content;
          }
          self.content = res.content;
          self.en_content = res.en_content;
          self.$refs.formPostDate.resetFields();
          loading.close();
          console.log("ress", res.content);
        },
        res => {
          loading.close();
          self.$message.error(res.msg);
          console.log(res);
        }
      );
    },
    getfile(event, i) {
      if (i === 1) {
        this.formPostDate.photo1 = window.URL.createObjectURL(
          event.target.files[0]
        );
        this.formPostDate.report_card_1 = event.target.files[0];
      } else if (i === 2) {
        this.formPostDate.photo2 = window.URL.createObjectURL(
          event.target.files[0]
        );
        this.formPostDate.report_card_2 = event.target.files[0];
      } else if (i === 3) {
        this.formPostDate.photo3 = window.URL.createObjectURL(
          event.target.files[0]
        );
        this.formPostDate.report_card_3 = event.target.files[0];
      } else if (i === 4) {
        this.formPostDate.photo4 = window.URL.createObjectURL(
          event.target.files[0]
        );
        this.formPostDate.busi_card = event.target.files[0];
      }
    },
    getChoose() {
      let loadingInstance = this.$loading({});
      let param = {
        type: "all"
      };
      let self = this;
      api.GET(
        helper.getClientApiUrl(apiConfig.web.conferenceApplyOptions),
        param,
        res => {
          //获取下拉列表
          this.chooseJson = res;
          loadingInstance.close();
        },
        res => {
          console.log(res);
          loadingInstance.close();
        }
      );
    },
    goback() {
      this.successInfoShow = false;
      this.successInfo = "";
    }
  }
};
</script>

<style scoped>
.innerContainer {
  margin-top: 50px;
  min-height: 300px;
}

.p1 {
  font-size: 18px;
  text-align: center;
  height: 18px;
  line-height: 18px;
  color: #666666;
}

.border {
  height: 5px;
  background: #666666;
  margin: 12px 0 40px;
}

select {
  appearance: menulist-button;
  -moz-appearance: menulist-button;
  -webkit-appearance: menulist-button;
  width: 339px;
}

.formPost {
  padding: 0 59px 0 17px;
}

.formPost ul li {
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  margin-bottom: 20px;
  position: relative;
}

.formPost ul li span {
  width: 160px;
  text-align: left;
  color: #9d2137;
  font-size: 14px;
  display: inline-block;
}

input {
  border: 1px solid rgb(169, 169, 169);
  height: 18px;
}

.name {
  width: 154px;
}

.formPost ul li i {
  font-style: normal;
  color: #9d2137;
  font-size: 14px;
  padding: 0 30px;
}

#sex {
  width: 88px;
}

#cardNum {
  width: 337px;
}

.formPost ul li em {
  display: inline-block;
  width: 240px;
  height: 18px;
  background: #f2f2f2;
  text-align: center;
  line-height: 18px;
  font-size: 10px;
  font-style: normal;
  color: #666666;
}

.formPost ul li .emSmall {
  width: 75px;
  margin-left: 20px;
}

input[type="checkbox"] {
  appearance: checkbox;
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
  margin-right: 20px;
  float: left;
  /* border: 1px solid black; */
}

.normalcolor {
  color: #666666;
}

#submit {
  margin: 0 auto;
  margin-top: 60px;
  color: #fff;
  background-color: #20a0ff;
  border-color: #20a0ff;
  margin-bottom: 50px;
}

.img {
  position: relative;
}

.img input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  width: 68px;
  height: 35px;
  z-index: 10;
}

.redLittle {
  position: absolute;
  top: 5px;
  right: -11px;
  width: 5px !important;
}

.imgShow {
  width: 400px;
}
.zi_upload_input {
  width: 130px !important;
}
.el-button,
#submit {
  background: #a62037;
  border: none;
}
</style>
<style>
#applyInnerContainer .el-form-item.is-required .el-form-item__label:before {
  content: "" !important;
  margin-right: 0;
}
#applyInnerContainer .el-form-item__label {
  padding-top: 10px !important;
  line-height: 1.3;
  width: 135px !important;
}
#applyInnerContainer .pdt0 label {
  padding-top: 0 !important;
}
</style>